<template>
	<navigator class="address" hover-class="none" url="/pages/address_list/address_list?from=order_confirm">
		<view class="address-container">
			<view class="left">
				<view v-if="currentAddress">
					<view class="name">
						{{ currentAddress.real_name }}
						<text class="phone">{{ currentAddress.phone }}</text>
					</view>
					<view class="detail">
						<text class="is-default" v-show="currentAddress.is_default === 1">[默认]</text>
						{{ currentAddress.province }}{{ currentAddress.city }}{{ currentAddress.district }}{{ currentAddress.detail }}
					</view>
				</view>
				<view class="set-address-tips" v-else>
					<text class="iconfont icon-shangpinshuliang-jia"></text>
					设置收货地址
				</view>
			</view>
			<view class="right iconfont icon-jiantou"></view>
		</view>
	</navigator>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState({
				currentAddress: state => state.user.currentAddress
			})
		}
	}
</script>

<style lang="scss" scoped>
.address {
	position: relative;
	height: 150rpx;
	padding: 28rpx 30rpx;
	box-sizing: border-box;
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 2rpx;
		background: url(~@/static/images/line.jpg);
	}
	&-container {
		display: flex;
		align-items: center;
		height: 100%;
		.left {
			flex: 1;
			.name {
				font-size: 30rpx;
				color: #282828;
				font-weight: 700;
				margin-bottom: 10rpx;
			}
			.detail {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 610rpx;
				font-size: 26rpx;
				color: #666;
				
				.is-default {
					color: #fc4141;
					margin-right: 10rpx;
				}
			}
			.set-address-tips {
				.iconfont {
					margin-right: 20rpx;
				}
			}
		}
	}
}
</style>
